<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form inline>
                <el-form-item>
                    <el-button type="danger" icon="el-icon-plus" @click="showDialog()">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-container">
            <el-table :data="rooms" border highlight-current-row header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="100" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="num" label="可容纳人数" />
                <el-table-column prop="desc" label="描述" />
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="showDialog(scope.$index)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="dialog-container">
            <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :title="dialogTitle">
                <el-form label-width="150px">
                    <el-form-item label="教室名称">
                        <el-input v-model="temp.name" placeholder="请输入名称" />
                    </el-form-item>
                    <el-form-item label="容纳人数">
                        <el-input v-model="temp.num" type="number" placeholder="请输入可容纳人数" />
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="temp.desc" placeholder="请输入描述" />
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleEdit()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import roomApi from '@/api/room'
export default {
    name: 'RoomIndex',
    data() {
        return {
            rooms: [],
            temp: {
                id: 0,
                name: '',
                num: 0,
                desc: ''
            },
            dialogVisible: false,
            dialogTitle: '新增教室'
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            roomApi.list().then(response => {
                this.rooms = response.data
            })
        },
        handleSearch() {
            // 实现搜索逻辑
        },
        handleEdit() {
            if (this.temp.id === 0) {
                // 新增逻辑
                roomApi.add(this.temp).then(response => {
                    this.dialogVisible = false // 关闭对话框
                    this.getList() // 重新获取列表数据
                    this.resetTemp() // 重置表单数据
                })
            } else {
                // 编辑逻辑
                roomApi.edit(this.temp).then(response => {
                    this.dialogVisible = false // 关闭对话框
                    this.getList() // 重新获取列表数据
                    this.resetTemp() // 重置表单数据
                })
            }
        },
        handleDelete(index) {
            // 实现删除逻辑
            this.$confirm('确认删除该教室吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                roomApi.delete(this.rooms[index].id).then(response => {
                    this.getList() // 重新获取列表数据
                })
            }).catch(() => {})
        },
        resetTemp() {
          this.temp = { id: 0, name: '', num: 0, desc: '' } // 重置 temp 对象的属性值为默认值，确保清空表单数据
        },
        showDialog(index) {
            this.dialogVisible = true
            if (typeof index === 'undefined') {
                this.dialogTitle = '新增教室'
                if (this.temp.id > 0) {
                    this.resetTemp()
                }
            } else {
                this.temp = JSON.parse(JSON.stringify(this.rooms[index]))
                this.dialogTitle = '编辑教室'
            }
        }
    }
}
</script>
